<template>

    <div class="diy-bg-main active-l">
      <div class="diy-phone diy-bg-box">
        <div class="phone-body">
          <div class="phone-title"></div>
          <div class="main-content mar-l-10 pad-b-6">
            <div class="mar-r-10">
              <div class="flex v-align-c title-bar pad-t-10 pad-b-15">
                <h2 class="flex-item">{{title ? title : '标题名称' }}</h2>
                <div class="font-12">距离结束  xx天xx:xx:xx</div>
              </div>
              <ul :class="'show-type-' + styleType">
                <li :style="'background-color:'+ backgroundColor" v-for="(item, index) in dataList" :key="index">
                  <div class="pic-box even">
                    <div class="gooods-pic" v-if="item.imageUrl">
                      <img :src="item.imageUrl">
                    </div>
                    <div class="gooods-pic picture-default" v-else>
                      <img :src="item.imageUrl" border="0px">
                    </div>
                  </div>

                  <div class="pad-6 detail-box">
                    <div class="desc font-12 mar-b-5">{{item.title }}</div>
                    <div class="flex v-align-b info-bar font-12">
                      <div class="flex-item">
                        <div class="tag flex v-align-c mar-b-2">
                          <span>分销</span>
                          <label>赚<i>{{item.distributeIncome}}</i>元</label>
                        </div>
                        <div class="price flex v-align-c">
                          <div class="flex-item">
                            <span class="font-15 mar-l--3"><span class="mar-r--3">￥</span>{{item.promotionPrice }}</span>
                            <label><label class="mar-r--3">￥</label>{{item.sellPrice}}</label>
                          </div>
                          <div class="stock">已售: {{item.salesNum }}</div>
                        </div>
                      </div>
                      <el-button class="buy-now-type mar-l-10" size="mini" type="primary">立即购买</el-button>
                    </div>
                    <el-button class="buy-now-type last-item" size="mini" type="primary">立即购买</el-button>
                  </div>

                  <div class="pic-box odd">
                    <div class="gooods-pic" v-if="item.mainImage">
                      <img :src="item.mainImage">
                    </div>
                    <div class="gooods-pic picture-default" v-else>
                      <img :src="item.imageUrl" border="0px">
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="phone-foot"></div>
      </div>
    </div>
</template>

<script>
  import goodsDefaultOne from '@/assets/images/goods-1.png'
  import goodsDefaultTwo from '@/assets/images/goods-2.png'

  export default {
    data() {
      return {
        title: '',
        backgroundColor: '',
        promotionId: '',
        goodsList: [],
        listLoading: true,
        dialogFormVisible: false,
        total: null,
        searchListQuery: {
          enterpriseId: this.getEnterpriseId(),
          currentPage: 1,
          size: 10,
          title: ''
        },
        goodsDefaultOne: goodsDefaultOne,
        goodsDefaultTwo: goodsDefaultTwo,
        dataList: [],
        selectLoading: true,
        dialogSkuVisible: false,
        skuLoading: true,
        visiblePopPrice: false,
        skuParamSettingValue: ''
      }
    },
    // 初始化页面
    created() {
      console.log('promotion-phone')
    },
    mounted() {
      const that = this
      this.$bus.$on('promotion-phone', function(data) {
        that.dataList = data
      })
    },
    filters: {
    },
    methods: {
      addGoods() {
        this.$parent.$refs.promotionItemAdd.dialogFormVisible = true
        this.$parent.$refs.promotionItemAdd.isSelectDataList()
      },
      setActivePrice() {
        this.dialogSkuVisible = true
        this.skuLoading = true
        setTimeout(() => {
          this.skuLoading = false
        }, 800)
      },
      sureOk() {
        this.dialogSkuVisible = false
      },
      buttonOk() {
        this.dialogFormVisible = false
        // this.listData()
      },
      handleSearch() {
      },
      selectGoods(item, index) {
        this.goodsList.forEach((itemVal, indexVal) => {
          if (itemVal === item) {
            itemVal.selected = !itemVal.selected
            const changeData = itemVal.selected
            this.$delete(itemVal, 'selected')
            this.$set(itemVal, 'selected', changeData)
          }
        })
      },
      // 更改当前页数
      handleCurrentChange(val) {
        this.searchListQuery.currentPage = val
        this.goodsDataEls()
      },
      // 更改当前页面大小
      handleSizeChange(val) {
        this.searchListQuery.size = val
        this.goodsDataEls()
      },
      goodsDataEls() {
        // 选择商品处理开始
        this.listLoading = true
        setTimeout(() => {
          this.listLoading = false
        }, 800)
        this.goodsList = [
          {
            goodsId: '1',
            title: '英爵伦男装 11潮牌潮流休闲撞色卫衣 创意趣味印花 秋季新款上衣男 英爵伦男装 潮牌潮流休闲撞',
            mainImage: 'https://img-1.joinsun.vip/upload/0b1f7404033e7ecab028d1bd312c4e07.jpg',
            categoryName: '服装-潮流男性-衬衫',
            skuFlag: 1,
            supplyPrice: '61.00',
            sellPrice: '61.00',
            stock: 31
          },
          {
            goodsId: '2',
            title: '英爵伦男装 22潮牌潮流休闲撞色卫衣 创意趣味印花 秋季新款上衣男 英爵伦男装 潮牌潮流休闲撞',
            mainImage: 'https://img-1.joinsun.vip/upload/0b1f7404033e7ecab028d1bd312c4e07.jpg',
            categoryName: '服装-潮流男性-衬衫',
            skuFlag: 1,
            supplyPrice: '62.00',
            sellPrice: '62.00',
            stock: 32
          }
        ]
        this.goodsList.forEach((itemVal, indexVal) => {
          itemVal.selected = false
        })
        // 选择商品处理结束
      }
    }
  }
</script>

<style lang="less" scoped>
  // 页面总体布局
  .active-main{
    background: #f8f8f8;
    &:after{
      content: '';
      display: block;
      clear: both;
      font-size: 0;
    }
    .active-l{
      .main-content{
        padding-right: 4px;
        padding-left: 2px;
        height: 570px;
        overflow-x: hidden;
        overflow-y: auto;
        &::-webkit-scrollbar {
          width: 4px;
        }
        &::-webkit-scrollbar-thumb {
          border-radius: 10px;
          box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
          -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
          background: rgba(0,0,0,0.2);
        }
        &::-webkit-scrollbar-track {
          box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
          -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
          border-radius: 0;
          background: rgba(0,0,0,0.1);
        }
        h2{
          margin: 0;
          font-size: 18px;
        }
        ul{
          padding: 0;
          margin: 0;
          &:after{
            content: '';
            display: block;
            clear: both;
            font-size: 0;
          }
          &.show-type-1{
            li{
              .gooods-pic{
                img{
                  width: 100%;
                  height: 149px;
                  border-top-left-radius: 4px;
                  border-top-right-radius: 4px;
                }
              }
            }
          }
          &.show-type-2{
            li{
              width: 48%;
              float: left;
              &:nth-child(odd){
                margin-right: 4%;
              }
              .gooods-pic{
                img{
                  width: 100%;
                  height: 133px;
                  border-top-left-radius: 4px;
                  border-top-right-radius: 4px;
                }
              }
              .buy-now-type{
                display: none;
              }
              .price{
                label{
                  display: none;
                }
              }
            }
          }
          &.show-type-3{
            li{
              display: -webkit-box;
              display: -webkit-flex;
              display: flex;
              flex-flow: row;
              align-items: center;
              padding: 0 5px 0 8px;
              .pic-box{
                margin-right: 6px;
                .gooods-pic{
                  img{
                    width: 82px;
                    height: 82px;
                  }
                }
              }
              .detail-box{
                -webkit-box-flex: 1;
                -webkit-flex: 1;
                flex: 1;
              }
              .tag{
                span{
                  padding: 1px 5px!important;
                }
                label{
                  padding: 1px 5px!important;
                }
              }
              .price{
                label{
                  display: none;
                }
              }
              .stock{
                display: none;
              }
            }
          }
          &.show-type-4{
            li{
              display: -webkit-box;
              display: -webkit-flex;
              display: flex;
              flex-flow: row;
              align-items: center;
              padding: 8px 5px 8px 8px;
              &:nth-child(even){
                .pic-box{
                  &.even{
                    display: none;
                  }
                  &.odd{
                    display: block;
                  }
                }
              }
              &:nth-child(odd){
                .pic-box{
                  &.even{
                    display: block;
                  }
                  &.odd{
                    display: none;
                  }
                }
              }
              .pic-box{
                margin-right: 6px;
                .gooods-pic{
                  img{
                    width: 122px;
                    height: 122px;
                  }
                }
              }
              .detail-box{
                -webkit-box-flex: 1;
                -webkit-flex: 1;
                flex: 1;
                padding: 0 6px!important;
              }
              .desc{
                margin-top: -6px;
              }
              .tag{
                margin-top: -1px;
                margin-bottom: 0px;
                span{
                  padding: 1px 5px!important;
                }
                label{
                  padding: 1px 5px!important;
                }
              }
              .price{
                .flex-item{
                  >label{
                    display: -webkit-box;
                    display: -webkit-flex;
                    display: flex;
                    margin-top: -8px;
                  }
                }
              }
              .stock{
                display: none;
              }
              .info-bar{
                .buy-now-type{
                  display: none!important;
                }
              }
              .last-item{
                display: block!important;
                margin-top: 5px;
              }
            }
          }
          li{
            list-style-type: none;
            border-radius: 4px;
            box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
            margin-bottom: 15px;
            &:last-child{
              margin-bottom: 0;
            }
            .pic-box{
              &.odd{
                display: none;
              }
            }
            .gooods-pic{
              img{
                display: block;
              }
            }
            .desc{
              height: 36px;
              line-height: 1.5;
              overflow:hidden;
              text-overflow:ellipsis;
              display:-webkit-box;
              -webkit-line-clamp:2;
              -webkit-box-orient:vertical;
              word-break:break-word;
            }
            .last-item{
              display: none;
            }
            .info-bar{
              .tag{
                line-height: 1.3;
                span{
                  background: #fed807;
                  color: #333;
                  padding: 2px 5px;
                }
                label{
                  background: #272727;
                  color: #fff;
                  padding: 2px 5px;
                  min-width: 60px;
                  box-sizing: border-box;
                  i{
                    color: #ffc81b;
                    font-style: normal;
                  }
                }
              }
              .price{
                span{
                  color: #FF4949;
                }
                label{
                  text-decoration: line-through;
                }
              }
              .stock{
                color: #6e6e6e;
              }
              label{
                font-weight: normal;
              }
            }
          }
        }
        .picture-default{
          background: #fe8096;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }
    .active-r{
      border: 1px solid #ddd;
      border-radius: 10px;
      background: #fff;
      padding: 20px;
      min-height: 609px;
      h2{
        font-size: 18px;
        margin: 0;
      }
      .tips{
        color: #409eff;
      }
      .select-table{
        min-height: auto!important;
      }
    }
  }
  .category-style {
    color: #6290ff;
    font-size: 13px;
  }
  .title-line-2{
    height: 40px;
    line-height: 1.4;
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    word-break:break-word;
  }
  // 商品弹窗样式
  .goods-layer{
    h3{
      margin: -10px 0 0 0;
      color: #303133;
      font-size: 18px;
      text-align: center;
    }
    .dialog-footer{
      position: absolute;
      left: 0;
      bottom: 20px;
      width: 100%;
    }
    .table-container{
      height: 500px;
      overflow-x: hidden;
      overflow-y: auto;
    }
  }
  // 左侧手机模型样式
  .diy-bg-main{
    .diy-phone {
      float: left;
      width: 340px;
      border: 1px solid #ddd;
      border-radius: 10px;
      background: #fff;
      padding: 10px;
      overflow: hidden;
      &.none-border{
        border: none;
        background: none;
        padding: 0px 10px;
        border-radius: 0;
      }
    }
    .diy-phone .phone-head {
      height: 44px;
      background: #fff;
      position: relative;
    }
    .diy-phone .phone-head:before {
      content: "";
      position: absolute;
      top: 15px;
      left: 112px;
      height: 8px;
      width: 8px;
      background: #ddd;
      border-radius: 8px;
    }
    .diy-phone .phone-head:after {
      content: "";
      position: absolute;
      top: 15px;
      left: 128px;
      height: 8px;
      width: 50px;
      background: #ddd;
      border-radius: 8px;
    }
    .diy-phone .phone-title {
      height: 17px;
      /*background: url(../../../../assets/images/wx-top-2.png) 0 0 no-repeat;*/
      background-size: 100% auto;
      padding: 0 50px;
      font-size: 15px;
      color: #333333;
      text-align: center;
      line-height: 68px;
      cursor: default;
      overflow: hidden;
      display: block;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
</style>
